<template>
    <el-dialog v-model="dialogVisible" class="update-phone-dialog" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :lock-scroll="false" top="20vh" width="300px" title="修改手机号" align="center">
        <div class="cell">
            <el-input type="text" size="large" v-model="form.old_mobile" placeholder="请输入旧手机号"></el-input>
        </div>
        <div class="cell">
            <el-input type="password" size="large" v-model="form.password" placeholder="请输入登录密码"></el-input>
        </div>
        <div class="cell">
            <el-input type="text" size="large" v-model="form.new_mobile" placeholder="请输入新手机号"></el-input>
        </div>
        <div class="cell">
            <el-input type="text" size="large" v-model="form.code" placeholder="请输入验证码">
                <template #append>
                    <el-button @click="onSendCode">{{ codeText }}</el-button>
                </template>
            </el-input>
        </div>

        <div class="form-button">
            <button class="btn" @click="onSubmit">修改</button>
        </div>
    </el-dialog>
</template>
<script setup>
import { useContent } from ".";
const { dialogVisible, form, codeText, onSendCode, onSubmit } = useContent();

defineExpose({
    show: () => (dialogVisible.value = true),
});
</script>
<style lang="scss" scoped>
.update-phone-dialog {
    .cell {
        margin-bottom: 20px;
    }

    .form-bottom {
        display: flex;
        margin-top: 10px;

        .text-btn {
            display: inline-block;
            color: #5185fb;
            font-size: 14px;
            cursor: pointer;
            user-select: none;

            &.to-login {
                margin-left: auto;
            }
        }
    }

    .btn {
        width: 100%;
        outline: none;
        border: none;
        background-color: #5185fb;
        color: #fff;
        font-size: 18px;
        height: 40px;
        border-radius: 4px;
        cursor: pointer;
    }
}
</style>
